import React ,{forwardRef, useImperativeHandle}from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment, selectCount } from './counterSlice'
import { useAppDispatch, useAppSelector } from '../../app/hooks'
// import styles from './Counter.module.css'

export const Counter = forwardRef(function Counter(props, ref) {
  const count = useAppSelector(selectCount)
  const dispatch = useAppDispatch()

  useImperativeHandle(ref, () => ({
    add: add
  }))

  function add() {
    console.log('add')
  }

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
})